<template>
  <div id="home">
    <navbar class="home-nav">
      <template v-slot:center><h2>购物街</h2></template>
    </navbar>
    <TabControl :titles="['流行','新款','精选']" 
    class="tabcontrol" @tabClick="tabClick"
    ref='tabControl1'
    v-show="isTabFixed"
    ></TabControl>
    <scroll class="content" 
    ref="wrapper" 
    :probe-type="3"
     @scroll="contentscroll"
     :pull-up-load='true' 
     @pullingUp='loadMore'>
     
    <HomeSwiper :banners="banners" 
    @swiperImageLoad="swiperImageLoad">
    </HomeSwiper>
    <RecommendView :recommends="recommends"></RecommendView>
    <FeatureView></FeatureView>
    <TabControl :titles="['流行','新款','精选']" 
    class="tabcontrol" @tabClick="tabClick"
    ref='tabControl2'
    ></TabControl>
    <GoodsList :goods="showGoods" ></GoodsList>
    </scroll>
    <BackTop @click.native="backtopclick" v-show="isShowBackTop"></BackTop>
     <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
      <li>60</li>
      <li>61</li>
      <li>62</li>
      <li>63</li>
      <li>64</li>
      <li>65</li>
      <li>66</li>
      <li>67</li>
      <li>68</li>
      <li>69</li>
      <li>70</li>
      <li>71</li>
      <li>72</li>
      <li>73</li>
      <li>74</li>
      <li>75</li>
      <li>76</li>
      <li>77</li>
      <li>78</li>
      <li>79</li>
      <li>80</li>
      <li>81</li>
      <li>82</li>
      <li>83</li>
      <li>84</li>
      <li>85</li>
      <li>86</li>
      <li>87</li>
      <li>88</li>
      <li>89</li>
      <li>90</li>
      <li>91</li>
      <li>92</li>
      <li>93</li>
      <li>94</li>
      <li>95</li>
      <li>96</li>
      <li>97</li>
      <li>98</li>
      <li>99</li>
      <li>100</li>
    </ul>
  </div>
</template>

<script>
  import navbar from "components/common/navbar/NavBar.vue"
  import { getHomeMultidata ,getHomeGoods} from "network/home.js";
  // import {getHomeGoods} from "network/home.js";
  import HomeSwiper from "./homecomponents/HomeSwiper.vue"
  
  import RecommendView from "./homecomponents/RecommendView";
  import FeatureView from "./homecomponents/FeatureView";

  import TabControl from "components/content/tabControl/TabControl.vue"

  import GoodsList from "components/content/goods/GoodsList.vue"

  // import Bs from "better-scroll"
  import scroll from "components/common/scroll/Scroll"
  import Scroll from '../../components/common/scroll/Scroll.vue';
  import BackTop from "components/content/backtop/BackTop.vue";
// import BackTop from '../../components/content/backtop/BackTop.vue';
  
 
  export default {
    name: "Home",
    components:{
      navbar,
      HomeSwiper,
      RecommendView,
      FeatureView,
      TabControl,
      GoodsList,
      scroll,
        Scroll,
      BackTop,
        BackTop
    },
   
    data() {
      return {
        // result:null,
        banners:[],
        recommends:[],
        goods:{
          'pop':{page:0,list:[]},
          'new':{page:0,list:[]},
          'sell':{page:0,list:[]}
        },
        currentType:'pop',
        scroll:null,
        isShowBackTop:false,
        tabOffsetTop:0,
        isTabFixed:false,
        // saveY:0
      }
    },
    computed: {
     showGoods() {
       return this.goods[this.currentType].list
     }
    },
    created() {
      this.getHomeMultidata()
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },

    methods: {
      // 事件监听方法
    tabClick(index) {
      // console.log(index);
      switch (index) {
        case 0 :
          this.currentType='pop'
          break
        case 1 :
          this.currentType='new'
          break
        case 2 :
          this.currentType='sell'
          break
      }
      this.$refs.tabControl1.currentIndex=index
      this.$refs.tabControl2.currentIndex=index
    },
    backtopclick() {
      this.$refs.wrapper.scroll.scrollTo(0,0,1000)
      // console.log('回到顶部');
    },
    contentscroll(position) {
      // console.log(position);
      if (position.y < 500) {
        this.isShowBackTop = (-position.y) > 1000
      }
      this.isTabFixed=(-position.y) > this.tabOffsetTop


    },
    loadMore() {
      // console.log('上啦加载更多');
      this.getHomeGoods(this.currentType)
      
      // console.log(this.$refs.wrapper.scroll.__proto__.refresh);
      
    },
    swiperImageLoad() {
      // this.tabOffsetTop=this.$refs.tabControl
      // console.log(this.$refs.tabControl.$el.offsetTop)
      this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
    },
    // imgload() {
    //   console.log('imgload');
    //   console.log(this.scroll.scrollerHeight);
    // },
      // 网路请求方法
      getHomeMultidata() {
        getHomeMultidata().then(res => {
        // console.log(res);
        // this.result=res
        this.banners=res.data.banner.list;
        this.recommends=res.data.recommend.list
      })
      
      },
      getHomeGoods(type) {
        const page=this.goods[type].page+1
        getHomeGoods(type,page).then(res=>{
        // console.log(res);
        this.goods[type].list.push(...res.data.list) 
        this.goods[type].page +=1

        this.$refs.wrapper.finishPullUP()
      })
      }
     
    },
    mounted() {  
      // console.log(this.$refs)
    },
    destroyed() {
      // console.log('xiaoshi');
    },
    activated() {
      // this.$refs.wrapper.scrollTo(0, this.saveY, 1)
    },
    deactivated() {
      // this.saveY=-1000
    }
  }
</script>

<style scoped>
#home {
  /* padding-top: 44px; */
  height: 100vh;
}

.content {
      height: calc(100% - 54px);
      overflow: hidden;
    }



.home-nav {
      /* background-color: red; */
      background-color: var(--color-tint);
      position: fixed;
      top: 0;
      z-index: 9;

    }

.tabcontrol {
      position: sticky;
      top: 44px;
      z-index: 9;
    }

    
    
</style>
